<template>
  <div >
    <van-nav-bar
      title="详情"    
      left-arrow   
      class="page-nav-bar"
      @click-left="$router.back()"
    />

  <van-cell-group inset >
   <h3>{{list.title}}</h3>
   <p><span>时间:</span><span>{{list.create_date | formatDate}}</span>    <span>分类:</span><span>{{list.catename}}</span>     <span>阅读</span><span>({{list.lovenum}})</span></p>
  </van-cell-group>
  <img class="imge" :src="'http://124.223.14.236:8060/' + list.pic" alt="">
  <van-cell>
     {{list.description}}
   </van-cell>

    <p class="qwe">相关推荐</p>
    <van-grid :border="false" :column-num="2" :gutter="10">
      <van-grid-item v-for="item in getlist" :key="item.id">
         <router-link to="/xiangq" @click.native="indexid(item.id)">
         <img class="csimg" :src="'http://124.223.14.236:8060/' + item.pic" alt="">
         <p class="bt">{{item.title}}</p>
        </router-link>
      </van-grid-item> 
    </van-grid>
   
   <van-tabbar route>
      <van-tabbar-item icon="like-o" @click="sc">收藏</van-tabbar-item>
      <van-tabbar-item  icon="thumb-circle-o" @click="dz">点赞</van-tabbar-item>
    </van-tabbar>
  

    <div class="foth"></div>
    
  </div>
</template>

<script>
import {xiangqing} from "../../api/xq"
import {formatDate } from '../../api/time'
import {getZnAndSc} from '../../api/shcdz'
export default {
  data() {
    return {
      list: [],
      getlist:[],
      idx:'',
      froms:{
        article_id:'',
        type:'',
        action:'add'
      }

    }
  },
  created(){
    //  this.dianj()
    this.getxq()
  },
  methods:{
    indexid(idx){
     localStorage.setItem('ids',idx)
     window.location.reload();
    },
   async getxq(){
    try {
     this.idx=JSON.parse(localStorage.getItem("ids"))
      let {data} =await xiangqing({id:this.idx})
      console.log(data.data);
      this.list=data.data.info
      this.getlist=data.data.recommend
    } catch (error) {
      console.log(error);
    }
  },
  async dz(){
    try {
     this.froms.article_id=JSON.parse(localStorage.getItem("ids"))
     this.froms.type=2
      let {data} =await getZnAndSc(this.froms)
      console.log(data);
     
    } catch (error) {
      this.$toast.fail('点赞失败')
      console.log(error);
    }
      this.$toast.success('点赞成功')

  },
  async sc(){
    try {
     this.froms.article_id=JSON.parse(localStorage.getItem("ids"))
     this.froms.type=1
      let {data} =await getZnAndSc(this.froms)
      console.log(data);
    } catch (error) {
      this.$toast.fail('收藏失败')
      console.log(error);
    }
      this.$toast.success('收藏成功')

  },
 },
 filters:{
   formatDate(time) {
    var date = new Date(time);
    return formatDate(date, 'yyyy.MM.dd'); 
   }
 }
}
</script>

<style>
.qwe{
  color: #4a8cfa;
  font-weight: 600;
  margin-left: 10px;
}
.imge{
width: 90%;
margin-left: 5%;
}
.csimg{
  width: 80%;
  height: 86px;
  margin-left: 10%;
}
.bt{
   font-size: 12px;
  display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 1; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
  
}
.foth{
  height: 50px;
}

</style>